<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/23
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%--自定义动画轨迹--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
        .con {width: 248px; height: 100px;
            border:1px solid gold;
            margin: 100px auto;overflow: hidden;}
        .con ul {width: 500px;}
        .con ul li{float: left;
            width: 49px;
            border-left: 1px solid gold;}
    </style>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.con ul li').hover(function (e) {
                $(this).stop().animate({'width':'99px'},1000).siblings().stop().animate({'width':'25px'},1000);
            },function () {
                $('.con ul li').stop().animate({'width':'49px'},1000);
            });
        })
    </script>
</head>
<body>
    <div class="con">
        <ul>
            <li><img src="../img/1/1.png" width="100" height="100"/></li>
            <li><img src="../img/1/2.png" width="100" height="100"/></li>
            <li><img src="../img/1/3.png" width="100" height="100"/></li>
            <li><img src="../img/1/4.png" width="100" height="100"/></li>
            <li><img src="../img/1/5.png" width="100" height="100"/></li>
        </ul>
    </div>
</body>
</html>
